<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html dir="ltr" lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<title>The Project | Home Agency</title>
		<meta name="description" content="The Project a Bootstrap-based, Responsive HTML5 Template">
		<meta name="author" content="htmlcoder.me">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Fontello CSS -->
		<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="css/animations.css" rel="stylesheet">
		<link href="plugins/fullpage/jquery.fullpage.min.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.carousel.min.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.theme.default.min.css" rel="stylesheet">
		<link href="plugins/hover/hover-min.css" rel="stylesheet">		
		
		<!-- The Project's core CSS file -->
		<!-- Use css/rtl_style.css for RTL version -->
		<link href="css/style.css" rel="stylesheet" >
		<!-- The Project's Typography CSS file, includes used fonts -->
		<!-- Used font for body: Roboto -->
		<!-- Used font for headings: Raleway -->
		<!-- Use css/rtl_typography-default.css for RTL version -->
		<link href="css/typography-default.css" rel="stylesheet" >
		<!-- Color Scheme (In order to change the color scheme, replace the blue.css with the color scheme that you prefer)-->
		<link href="css/skins/light_blue.css" rel="stylesheet">
		

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
	</head>

	<!-- body classes:  -->
	<!-- "boxed": boxed layout mode e.g. <body class="boxed"> -->
	<!-- "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> -->
	<!-- "transparent-header": makes the header transparent and pulls the banner to top -->
	<!-- "gradient-background-header": applies gradient background to header -->
	<!-- "page-loader-1 ... page-loader-6": add a page loader to the page (more info @components-page-loaders.html) -->
	<body class="no-trans front-page transparent-header  full-page">

		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop circle"><i class="icon-up-open-big"></i></div>
		
		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">
		
			<!-- header-container start -->
			<div class="header-container">
				<!-- header start -->
				<!-- ================ --> 
				<header class="header  clearfix">
					
					<div class="container">
						<div class="row">
							<div class="col-md-3 col-xs-6 ">
								<!-- header-first start -->
								<!-- ================ -->
								<div class="header-first clearfix">

									<!-- logo -->
									<div id="logo" class="logo">
										<a href="index.html"><img id="logo_img" src="images/logo_light_blue.png" alt="The Project"></a>
									</div>
									<div class="site-slogan" style="color: #bbbbbb;">
										Multipurpose HTML5 Template
									</div>
								</div>
								<!-- header-first end -->

							</div>
							<div class="col-md-9 col-xs-6">
					
								<!-- header-second start -->
								<!-- ================ -->
								<div class="header-second clearfix">
									<ul class="social-links circle colored animated-effect-1 text-right">
										<li class="facebook">
											<a class="text-white" target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a>
										</li>
										<li class="twitter">
											<a class="text-white" target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a>
										</li>
										<li class="googleplus">
											<a class="text-white" target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a>
										</li>
									</ul>
								</div>
								<!-- header-second end -->
					
							</div>
						</div>
					</div>
					
				</header>
				<!-- header end -->
			</div>
			<!-- header-container end -->

			<div class="fullpage-site">

				<!-- section start -->
				<!-- ================ -->
				<section id="section-1" class="section dark-translucent-bg" style="background-image: url(images/agency-background-img-1.jpg);">
					<div class="container">
						<div class="row">
							<div class="col-md-8">
								<h1 class="title large">Wellcome to <span class="text-default">The Agency</span></h1>
								<div class="separator-2"></div>
								<p class="large">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi perferendis magnam ea necessitatibus, officiis voluptas odit! Aperiam omnis, cupiditate laudantium velit nostrum, exercitationem accusamus, possimus soluta illo deserunt tempora qui.</p>
								<a href="#secondPage" class="btn btn-default btn-xl">Let's Start</a>
							</div>
						</div>
					</div>
				</section>
				<!-- section end -->

				<!-- section start -->
				<!-- ================ -->
				<section id="section-2" class="section dark-translucent-bg" style="background-image: url(images/agency-background-img-2.jpg);">
					<div class="container">
						<div class="row">
							<div class="col-md-8 text-center col-md-offset-2 pv-20">
								<h2 class="title">About Us</h2>
								<div class="separator mt-10"></div>
								<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi perferendis magnam ea necessitatibus, officiis voluptas odit! Aperiam omnis, cupiditate laudantium.</p>
								<div class="space-bottom"></div>
							</div>
						</div>
					</div>
					<div class="container-fluid">
						<div class="row">
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa fa-diamond"></i></span>
									<div class="body">
										<h4 class="title">We Have Strong Background</h4>
										<p>Voluptatem ad provident non repudiandae beatae cupiditate amet.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
									<div class="space-bottom"></div>
								</div>
							</div>
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa fa-connectdevelop"></i></span>
									<div class="body">
										<h4 class="title">We Love Details</h4>
										<p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritat.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
									<div class="space-bottom"></div>
								</div>
							</div>
							<div class="clearfix visible-sm"></div>
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa icon-snow"></i></span>
									<div class="body">
										<h4 class="title">We Use Latest Technologies</h4>
										<p>Inventore dolores aut laboriosam cum consequuntur delectus sequ.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
									<div class="space-bottom"></div>
								</div>
							</div>
							<div class="clearfix visible-md visible-lg"></div>
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa fa-heart"></i></span>
									<div class="body">
										<h4 class="title">We Love to Code</h4>
										<p>Voluptatem ad provident non repudiandae beatae cupiditate amet.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
									<div class="space-bottom"></div>
								</div>
							</div>
							<div class="clearfix visible-sm"></div>
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa fa-cogs"></i></span>
									<div class="body">
										<h4 class="title">We Are Extremely Flexible</h4>
										<p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritati.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
								</div>
							</div>
							<div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
								<div class="feature-box-2">
									<span class="default-bg icon small"><i class="fa icon-lifebuoy"></i></span>
									<div class="body">
										<h4 class="title">We Will Support You</h4>
										<p>Inventore dolores aut laboriosam cum consequuntur delectus sequi.</p>
										<a class="link-light" href="page-services.html">Read More<i class="pl-5 fa fa-angle-double-right"></i></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
				<!-- section end -->

				<!-- section start -->
				<!-- ================ -->
				<section id="section-3" class="section light-gray-bg">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2 text-center">
								<h2 class="title">Recent <span class="text-default">Projects</span></h2>
								<div class="separator"></div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae reprehenderit laboriosam, quasi ipsam adipisci, dolor facilis blanditiis, repellendus, esse porro ipsum! Quos obcaecati autem laudantium quis itaque non ducimus ea?</p>
								<div class="space-bottom"></div>
							</div>
						</div>
					</div>
					<div class="owl-carousel carousel-autoplay">
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-1.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-2.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-3.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-4.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-5.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box shadow text-center">
							<div class="overlay-container">
								<img src="images/portfolio-6.jpg" alt="">
								<div class="overlay-top">
									<div class="text">
										<h3><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small">Lorem ipsum dolor sit amet.</p>
									</div>
								</div>
								<div class="overlay-bottom">
									<div class="links">
										<a href="portfolio-item.html" class="btn btn-gray-transparent btn-animated">View Details <i class="pl-10 fa fa-arrow-right"></i></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
				<!-- section end -->

				<section id="section-4" class="section dark-translucent-bg" style="background-image: url(images/agency-background-img-3.jpg);">
					<div class="owl-carousel content-slider">
						<div class="container">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<div class="testimonial text-center">
										<div class="testimonial-image">
											<img src="images/testimonial-1.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
										</div>
										<h3>Just Perfect!</h3>
										<div class="separator"></div>
										<div class="testimonial-body">
											<blockquote>
												<p>Sed ut perspiciatis unde omnis iste natu error sit voluptatem accusan tium dolore laud antium, totam rem dolor sit amet tristique pulvinar, turpis arcu rutrum nunc, ac laoreet turpis augue a justo.</p>
											</blockquote>
											<div class="testimonial-info-1">- Jane Doe</div>
											<div class="testimonial-info-2">By Company</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<div class="testimonial text-center">
										<div class="testimonial-image">
											<img src="images/testimonial-2.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
										</div>
										<h3>Amazing!</h3>
										<div class="separator"></div>
										<div class="testimonial-body">
											<blockquote>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et cupiditate deleniti ratione in. Expedita nemo, quisquam, fuga adipisci omnis ad mollitia libero culpa nostrum est quia eos esse vel!</p>
											</blockquote>
											<div class="testimonial-info-1">- Jane Doe</div>
											<div class="testimonial-info-2">By Company</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="container">
						<div class="clients-container">
							<div class="clients">
								<div class="client-image">
									<a href="#"><img src="images/client-1.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-2.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-3.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-4.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-5.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-6.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-7.png" alt=""></a>
								</div>
								<div class="client-image">
									<a href="#"><img src="images/client-8.png" alt=""></a>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- section start -->
				<!-- ================ -->
				<section id="section-5" class="section pv-40 stats padding-bottom-clear dark-translucent-bg hovered background-img-5">
					<div class="container">
						<div class="row">
							<div class="col-md-8 text-center col-md-offset-2 pv-20">
								<h2 class="text-center">Contact Us</h2>
								<div class="separator"></div>
								<p class="lead text-center">It would be great to hear from you! Just drop us a line and ask for anything with which you think we could be helpful. We are looking forward to hearing from you!</p>
								<ul class="list-inline mb-20 text-center">
									<li><i class="text-default fa fa-map-marker pr-5"></i>One infinity loop, 54100</li>
									<li><a href="tel: 00 1234567890" class="link-dark"><i class="text-default fa fa-phone pl-10 pr-5"></i>+00 1234567890</a></li>
									<li><a href="mailto:info@theproject.com" class="link-dark"><i class="text-default fa fa-envelope-o pl-10 pr-5"></i>info@theproject.com</a></li>
								</ul>
								<div class="separator"></div>
								<ul class="social-links circle animated-effect-1 margin-clear text-center space-bottom">
									<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
									<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
									<li class="googleplus"><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
									<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
									<li class="xing"><a target="_blank" href="http://www.xing.com"><i class="fa fa-xing"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
				</section>
				<!-- section end -->
			</div>
			
			<!-- .subfooter start -->
			<!-- ================ -->
			<div class="subfooter">
				<div class="container">
					<div class="subfooter-inner">
						<div class="row">
							<div class="col-md-12">
								<p class="text-center">Copyright © 2016 The Project by <a target="_blank" href="http://htmlcoder.me">HtmlCoder</a>. All Rights Reserved</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- footer end -->
			
		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster -->
		<!-- ================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>
		<!-- Fullpage javascript -->
		<script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.min.js"></script>
		<script type="text/javascript" src="plugins/fullpage/jquery.fullpage.js"></script>
		<!-- Isotope javascript -->
		<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/waypoints/jquery.waypoints.min.js"></script>
		<!-- Count To javascript -->
		<script type="text/javascript" src="plugins/jquery.countTo.js"></script>
		<!-- Parallax javascript -->
		<script src="plugins/jquery.parallax-1.1.3.js"></script>
		<!-- Contact form -->
		<script src="plugins/jquery.validate.js"></script>
		<!-- Background Video -->
		<script src="plugins/vide/jquery.vide.js"></script>
		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="plugins/owlcarousel2/owl.carousel.min.js"></script>
		<!-- SmoothScroll javascript -->
		<script type="text/javascript" src="plugins/jquery.browser.js"></script>
		<script type="text/javascript" src="plugins/SmoothScroll.js"></script>
		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>
		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

	</body>
</html>
